<!--
 * @Description: 
 * @Autor: zhangbing
 * @Date: 2021-07-28 15:03:05
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-07-28 15:24:33
-->
<template>
  <div id="app">
    <table border="1">  
      <tr v-for="(item, index) in bookList" :key="index">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td :class="item.status | setOrderStatus | setStatusColor">{{item.status | setOrderStatus}}</td>
      </tr>
    </table>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {

  },
  data () {
    return {
      bookList: [
        {
          name: 'java',
          id: 1,
          price: 50,
          status: 1,
        },
        {
          name: 'javascript',
          id: 2,
          price: 40,
          status: 2,
        },
        {
          name: 'golang',
          id: 3,
          price: 60,
          status: 3,
        },
        {
          name: 'c#',
          id: 4,
          price: 70,
          status: 4,
        },
      ]
    }
  },
  filters: {
    setOrderStatus(status) {
      switch (status) {
        case 1:
          return '待付款'
        case 2: 
          return '待发货'
        case 3:
          return '待收货'
        case 4: 
          return '待评价'
        default:
          return '未获取到状态'
      }
    },
    setStatusColor(statusString) {
      switch (statusString) {
        case '待付款':
          return 'not-pay'
        case '待发货': 
          return 'not-send'
        case '待收货':
          return 'not-recieve'
        case '待评价': 
          return 'not-comment'
        default:
          return ''
      }
    },
  }
}
</script>

<style>
table {
  width: 800px;
  margin: 50px auto;
  border-collapse: collapse;
  text-align: center;
}

.not-send {
  color: blue;
}

.not-recieve {
  color: orange;
}

.not-pay {
  color: red;
}

.not-comment {
  color: green;
}
</style>
